<template>
  <SuperTable ref="superTableRef" search pager border align="center" :columns="columns" :data-request="fetchData" :export-config="{}" header-title="审批单记录">
    <template #action>
      <Button @click="state.showSearchModal = true">高级搜索</Button>
    </template>
  </SuperTable>
  <AdvancedSearchModal v-model:show-modal="state.showSearchModal" @search-fn="advancedSearchFn" />
  <AorSeeModal v-model:show-modal="state.showSeeModal" :data="state.currentData" />
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import AdvancedSearchModal, { State as AdvancedSearchState } from '@/modules/share-management/components/advanced-search-modal.vue';
import AorSeeModal from '@/modules/share-management/pages/approval-order-records/components/aor-see-modal.vue';
import type { TableColumnItem } from './columns';
import { VxeGridPropTypes } from 'vxe-table';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { getApprovalList, putSaveApproval, getSeniorFrom, delApproval } from '@/modules/share-management/api/approval-order-records';
import Button from '@/framework/components/basic/button/button.vue';

type State = {
  currentData: any;
  showSearchModal: boolean;
  showSeeModal: boolean;
};

/**
 * data
 */
const state: State = reactive({
  currentData: {},
  showSearchModal: false,
  showSeeModal: false,
} as State);

let searchData: AdvancedSearchState = {};

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 250,
    actions: ({ row }) => [
      {
        label: '查看',
        onClick: () => {
          state.currentData = row;
          state.showSeeModal = true;
        },
      },
      {
        label: row.commit ? '已提交' : '待提交',
        disabled: row.commit,
        popConfirm: {
          title: '确认提交审批单吗？',
          onConfirm: async () => {
            await putSaveApproval([row.id]);
            message.success('提交成功！');
            refreshTableFn();
          },
        },
      },
      {
        label: '删除',
        disabled: row.commit,
        popConfirm: {
          title: '确认删除审批单吗？',
          onConfirm: async () => {
            await delApproval([row.id]);
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params: API.SharedDataType = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'create_time',
        order: 'desc',
      },
    ],
    ...data,
  };
  let res = Object.keys(searchData).length ? await getSeniorFrom({ ...params, ...searchData }) : await getApprovalList(params);
  searchData = {};
  return res.result;
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
/**
 * fn
 */
const advancedSearchFn = (params: AdvancedSearchState) => {
  searchData = params;
  refreshTableFn();
};
</script>

<style scoped lang="less"></style>
